<!DOCTYPE HTML>
<html>

<head>
    <meta charset="UTF-8">
    <title>自动动画</title>
    <style>
        /*静态效果*/
        
        #clock {
            width: 400px;
            height: 400px;
            border: 6px solid #336699;
            border-radius: 200px;
            position: relative;
        }
        
        #minute {
            width: 10px;
            height: 100px;
            background: #996699;
            position: absolute;
            left: 195px;
            top: 100px;
        }
        
        #second {
            width: 6px;
            height: 140px;
            background: #336699;
            position: absolute;
            left: 197px;
            top: 60px;
        }
        /*分针动画部分*/
        
        #minute {
            transform-origin: 5px bottom;
            animation: minute 3600s linear infinite;
            -webkit-animation: minute 3600s linear infinite;
        }
        /******定义分针动画*******/
        
        @keyframes minute {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        
        @-webkit-keyframes minute {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        /*秒针动画部分*/
        
        #second {
            transform-origin: 3px bottom;
            animation: second 60s linear infinite;
            -webkit-animation: second 60s linear infinite;
            -moz-animation: second 60s linear infinite;
        }
        /********定义秒针动画**********/
        
        @keyframes second {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        
        @-webkit-keyframes second {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div id="clock">
        <div id="minute"></div>
        <div id="second"></div>
    </div>
</body>

</html>